import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Button, Card, Col, Form, Input, Row, Select } from 'antd';
import moment from 'moment';
import React, { useRef, useState } from 'react';
import styles from './index.less';

function BasicSearchForm(props: any) {
  const { Option } = Select;
  const { handleSearch, searchFormList, resetForm = () => {} } = props;
  const ref = useRef<any>();
  const [form] = Form.useForm();
  const [expand, setExpand] = useState<boolean>(false);
  const getSearch = (item: any) => {
    let selectList: any[] = [];
    switch (item.type) {
      case 'select':
        Object.keys(item.valueEnum).forEach((i: any) => {
          selectList = [...selectList, { value: i, label: item.valueEnum[i] }];
        });
        return (
          <Select placeholder="请选择" allowClear>
            {selectList.map((element: any) => (
              <Option key={element.value} value={element.value}>
                {element.label}
              </Option>
            ))}
          </Select>
        );
      default:
        return <Input placeholder="请输入" allowClear />;
    }
  };

  const handleSubmit = (values: any) => {
    console.log(values);
    Object.keys(values).forEach((item) => {
      values[item] =
        values[item] instanceof moment ? moment(values[item]).format('YYYY-MM-DD') : values[item];
    });
    handleSearch(values);
  };
  const handleResetForm = () => {
    resetForm();
    form.resetFields();
    // 重置YearPicker
    if (ref.current) ref.current.handleChanges(null);
    handleSearch({});
  };
  const handleToggle = () => {
    setExpand((pre: boolean) => !pre);
  };

  const getParams = () => {
    const count = expand ? searchFormList.length : 3;
    return searchFormList.map((item: any, index: number) => (
      <Col span={6} key={item.dataIndex} style={{ display: index < count ? 'block' : 'none' }}>
        <Form.Item name={item.dataIndex} key={item.dataIndex} label={item.title}>
          {getSearch(item)}
        </Form.Item>
      </Col>
    ));
  };
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 5 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };
  return (
    <Card bordered={false} className={styles.card}>
      <Form
        form={form}
        {...formItemLayout}
        className={styles['ant-advanced-search-form']}
        onFinish={handleSubmit}
      >
        <Row gutter={24}>
          {getParams()}
          <Form.Item className={styles['search-button']}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button style={{ marginLeft: 10 }} onClick={handleResetForm}>
              重置
            </Button>
            {searchFormList.length > 3 ? (
              <a style={{ marginLeft: 15, fontSize: 14 }} onClick={handleToggle}>
                {expand ? (
                  <>
                    收起
                    <UpOutlined className={styles.icon} />
                  </>
                ) : (
                  <>
                    展开
                    <DownOutlined className={styles.icon} />
                  </>
                )}
              </a>
            ) : null}
          </Form.Item>
        </Row>
      </Form>
    </Card>
  );
}

export default BasicSearchForm;
